<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理系统 - 主页</title>
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="mainApp" class="main-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <h3>管理系统</h3>
            </div>
            <nav class="sidebar-nav">
                <ul>
                    <li v-for="item in menuItems" 
                        :key="item.id" 
                        :class="{'has-children': item.children, 'expanded': isMenuExpanded(item.id)}">
                        <div class="menu-item" @click="selectMenuItem(item)">
                            <div class="menu-title">
                                <span class="menu-icon">{{ item.icon }}</span>
                                <span class="menu-name">{{ item.name }}</span>
                            </div>
                            <span v-if="item.children" class="arrow">
                                {{ isMenuExpanded(item.id) ? '▼' : '▶' }}
                            </span>
                        </div>
                        <!-- 子菜单 -->
                        <ul v-if="item.children" class="submenu" :class="{'show': isMenuExpanded(item.id)}">
                            <li v-for="subItem in item.children" 
                                :key="subItem.id"
                                @click.stop="selectMenuItem(subItem)"
                                class="submenu-item">
                                <span class="submenu-icon">•</span>
                                {{ subItem.name }}
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <header class="header">
                <div class="user-info">
                    <span>欢迎，{{ userInfo.username }}</span>
                    <button class="logout-btn" @click="logout">退出</button>
                </div>
            </header>
            
            <main class="content">
                <!-- 选项卡导航 -->
                <div class="tabs-nav">
                    <div class="tabs-list">
                        <div v-for="tab in tabs" 
                             :key="tab.id" 
                             class="tab-item"
                             :class="{ 'active': activeTab === tab.id }"
                             @click="activeTab = tab.id">
                            {{ tab.title }}
                            <span v-if="tab.closable" 
                                  class="tab-close"
                                  @click.stop="closeTab(tab.id)">×</span>
                        </div>
                    </div>
                </div>
                
                <!-- 选项卡内容 -->
                <div class="tab-content">
                    <div v-for="tab in tabs" 
                         :key="tab.id"
                         v-show="activeTab === tab.id"
                         class="tab-pane">
                        <h2>{{ tab.title }}</h2>
                        <p>{{ tab.content }}</p>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 引入Vue.js -->
    <script src="lib/vue.js"></script>
    <!-- 引入主页面脚本 -->
    <script src="js/main.js"></script>
</body>
</html>